<template>
	<div>
		<cehua id="ch"></cehua>
		<div class="ms-top" style="position: absolute;z-index: 3;top: 0.8rem;background: #fff;width: 100%;" id="chxia">
			<div class="ltaiwan-top">
				<div v-for="i in itemsSp">
					<img :src="i.album_logo" class="ltaiwan-top-img" />
				</div>
			</div>
			<div style="width: 100%;height: 1.7rem;"></div>
			<div class="ltaiwan-content" v-for="i in itemsSp">
				<img :src="i.image" class="ltaiwan-bigpic" />
				<p>&nbsp;&nbsp;&nbsp;&nbsp;{{ i.series_name }}</p>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;更新至{{ i.episode }}集&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上课人数：{{ i.play }}</span>
				<div class="ltaiwan-right">
					<img :src="i.album_logo" class="ltaiwan-smallpic" />
					<span>{{ i.album }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				itemsSp: []
			}
		},
		mounted() {
			fetch("../../static/meishi.json").then(function(res) {
					return res.json();
				})
				.then((res) => {
					this.itemsSp = res.data.data;
					//console.log(this.itemsSp);
				})
				this.getDataList()
		},
		methods: {
			getDataList () {
				//  this.$http({
				// 	url: this.$http.adornUrl('/sys/scheduleLog/list'),
				// 	method: 'get',
				// 	params: this.$http.adornParams({
				// 		'page': this.pageIndex,
				// 		'limit': this.pageSize,
				// 		'jobId': this.dataForm.id
				// 	})
				// 	}).then(({data}) => {
				// 		console.log(data)
				// 	})
			}
		},
		components: {
			"cehua": {
				template: `
					<div class="cehua">
						<ul>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/recommend.png"/>
								<span>首页</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/topic-icon.png"/>
								<span>专题</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/course.png"/>
								<span>乐活</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/category.png"/>
								<span>万道佳肴</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/scene-icon.png"/>
								<span>场景</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/community.png"/>
								<span>社区</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/activity-icon.png"/>
								<span>活动</span>
							</li>
							<li>
								<img src="http://pub.szzhangchu.com/web/v4.2/images/ico/tour-icon.png"/>
								<span>新手入门</span>
							</li>		
						</ul>
					</div>
				`
			}
		}
	}
</script>

<style>
.cehua {
	background: #F8F8F8;
}
.cehua>ul>li {
	height: 1.5rem;
	width: 3.5rem;
	display: flex;
	flex-flow: nowrap row;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 2px solid #e0e0e0;
	padding-left: .5rem;
}
.cehua>ul>li>span {
	margin-left: .3rem;
	color: #CBCACA;
	font-size: .3rem;	
}
.cehua>ul>li>span:hover {
	color: #ff8f5c;
}
.cehua>ul>li>img {
	width: .5rem;
}
</style>